<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>懒人开关 - 团队介绍与项目总结</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
  
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36D399',
            dark: '#1E293B',
            light: '#F8FAFC',
            team: '#4F46E5',
            course: '#10B981'
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
            noto: ['Noto Sans SC', 'sans-serif']
          },
        },
      }
    }
  </script>
  
  <style>
    body {
      background: linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%);
    }
    
    .team-card {
      transition: all 0.3s ease;
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    }
    
    .team-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    }
    
    .role-tag {
      position: absolute;
      top: 15px;
      right: 15px;
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 600;
    }
    
    .timeline-item {
      position: relative;
      padding-left: 30px;
      margin-bottom: 30px;
    }
    
    .timeline-item:before {
      content: '';
      position: absolute;
      left: 0;
      top: 8px;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #4F46E5;
    }
    
    .timeline-item:after {
      content: '';
      position: absolute;
      left: 7px;
      top: 24px;
      width: 2px;
      height: calc(100% + 15px);
      background: #c7d2fe;
    }
    
    .timeline-item:last-child:after {
      display: none;
    }
    
    .project-card {
      border-radius: 16px;
      overflow: hidden;
      transition: all 0.3s ease;
    }
    
    .project-card:hover {
      transform: scale(1.03);
      box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
    }
    
    .feature-icon {
      width: 60px;
      height: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(22, 93, 255, 0.1);
      border-radius: 16px;
      margin-bottom: 16px;
    }
    
    .bilibili-video {
      position: relative;
      padding-top: 56.25%;
    }
    
    .bilibili-iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: none;
    }
    
    .future-icon {
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 12px;
      margin-bottom: 15px;
    }
    
    .fade-in {
      animation: fadeIn 0.8s ease-out;
    }
    
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    .section-title {
      position: relative;
      display: inline-block;
      margin-bottom: 2rem;
    }
    
    .section-title:after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 0;
      width: 100%;
      height: 4px;
      background: linear-gradient(90deg, #165DFF, #36D399);
      border-radius: 2px;
    }
  </style>
</head>
<body class="font-noto text-dark antialiased">
  <!-- 导航栏 -->
  <nav class="bg-white shadow-sm sticky top-0 z-50">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between items-center py-4">
        <div class="flex items-center">
          <div class="w-10 h-10 rounded-full bg-primary flex items-center justify-center mr-3">
            <i class="fa fa-microphone text-white text-xl"></i>
          </div>
          <span class="text-xl font-bold text-primary">懒人开关</span>
        </div>
        
        <div class="hidden md:flex space-x-8">
          <a href="#product" class="text-gray-600 hover:text-primary transition-colors">产品介绍</a>
          <a href="#team" class="text-gray-600 hover:text-primary transition-colors">团队成员</a>
          <a href="#course" class="text-gray-600 hover:text-primary transition-colors">课程项目</a>
          <a href="#summary" class="text-gray-600 hover:text-primary transition-colors">项目总结</a>
        </div>
        
        <a href="#contact" class="px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
          联系我们
        </a>
      </div>
    </div>
  </nav>

  <!-- 产品介绍部分 -->
  <section id="product" class="py-16">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="max-w-5xl mx-auto">
        <div class="text-center mb-12 fade-in">
          <h1 class="text-4xl md:text-5xl font-bold text-dark mb-4">懒人开关 - 动动嘴，全屋掌控</h1>
          <p class="text-xl text-gray-600 max-w-3xl mx-auto">声控智能开关解决方案，结合多学科技术的创新实践</p>
        </div>
        
        <div class="bg-white rounded-2xl shadow-xl overflow-hidden mb-16 fade-in">
          <!-- B站视频播放器 -->
          <div class="relative bg-gray-100">
            <div class="bilibili-video">
              <iframe 
                class="bilibili-iframe"
                src="https://www.bilibili.com/video/BV1ZdTeztE4g/?spm_id_from=333.1387.homepage.video_card.click"
                scrolling="no"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                allowfullscreen>
              </iframe>
            </div>
          </div>
          
          <!-- 视频介绍 -->
          <div class="p-8">
            <h2 class="text-2xl font-bold mb-4">懒人开关如何改变您的生活</h2>
            
            <div class="space-y-10">
              <!-- 核心功能展示 -->
              <div>
                <h3 class="text-xl font-semibold mb-4 flex items-center">
                  <i class="fa fa-bolt text-secondary mr-3"></i>
                  核心功能展示
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                  <div class="bg-gray-50 p-5 rounded-lg">
                    <div class="feature-icon">
                      <i class="fa fa-microphone text-primary text-2xl"></i>
                    </div>
                    <h4 class="font-semibold mb-2">语音轻松控制</h4>
                    <p class="text-gray-600">只需动动嘴说"开灯"、"关灯"，无需起身操作，特别适合床上或沙发上使用。</p>
                  </div>
                  
                  <div class="bg-gray-50 p-5 rounded-lg">
                    <div class="feature-icon">
                      <i class="fa fa-mobile text-primary text-2xl"></i>
                    </div>
                    <h4 class="font-semibold mb-2">手机远程操控</h4>
                    <p class="text-gray-600">通过手机APP随时随地控制家中灯光，即使外出也能管理家中电器。</p>
                  </div>
                  
                  <div class="bg-gray-50 p-5 rounded-lg">
                    <div class="feature-icon">
                      <i class="fa fa-clock-o text-primary text-2xl"></i>
                    </div>
                    <h4 class="font-semibold mb-2">智能定时场景</h4>
                    <p class="text-gray-600">设置定时开关，如"晚上10点自动关灯"，创建个性化场景如"观影模式"。</p>
                  </div>
                  
                  <div class="bg-gray-50 p-5 rounded-lg">
                    <div class="feature-icon">
                      <i class="fa fa-leaf text-primary text-2xl"></i>
                    </div>
                    <h4 class="font-semibold mb-2">节能用电统计</h4>
                    <p class="text-gray-600">实时查看用电情况，发现待机耗电设备，帮助您节省电费开支。</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 团队成员介绍 -->
  <section id="team" class="py-16 bg-white">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center mb-16">
        <h2 class="text-3xl md:text-4xl font-bold text-dark mb-4 section-title">项目团队</h2>
        <p class="text-xl text-gray-600 max-w-3xl mx-auto">跨学科合作，融合多领域技术打造智能声控开关</p>
      </div>
      
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        <!-- 袁天泽 -->
        <div class="team-card bg-gradient-to-br from-indigo-50 to-purple-50">
          <div class="p-6">
            <div class="flex items-center mb-4">
              <div class="w-16 h-16 rounded-full bg-indigo-100 flex items-center justify-center mr-4">
                <span class="text-xl font-bold text-indigo-700">袁</span>
              </div>
              <div>
                <h3 class="text-xl font-bold text-gray-800">袁天泽</h3>
                <p class="text-gray-600">2024113865</p>
              </div>
            </div>
            <div class="bg-white rounded-lg p-4 mb-4">
              <div class="flex items-center mb-2">
                <span class="role-tag bg-indigo-500 text-white">3D打印</span>
              </div>
              <p class="text-gray-700">负责产品外壳设计与3D打印实现，确保结构合理性和美观性。</p>
            </div>
            <div class="flex space-x-2">
              <span class="px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm">SolidWorks</span>
              <span class="px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm">FDM打印</span>
              <span class="px-3 py-1 bg-indigo-100 text-indigo-800 rounded-full text-sm">结构优化</span>
            </div>
          </div>
        </div>
        
        <!-- 罗逸航 -->
        <div class="team-card bg-gradient-to-br from-blue-50 to-cyan-50">
          <div class="p-6">
            <div class="flex items-center mb-4">
              <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mr-4">
                <span class="text-xl font-bold text-blue-700">罗</span>
              </div>
              <div>
                <h3 class="text-xl font-bold text-gray-800">罗逸航</h3>
                <p class="text-gray-600">2024110963</p>
              </div>
            </div>
            <div class="bg-white rounded-lg p-4 mb-4">
              <div class="flex items-center mb-2">
                <span class="role-tag bg-blue-500 text-white">程序开发</span>
              </div>
              <p class="text-gray-700">负责嵌入式系统开发，实现语音识别、设备控制等核心功能。</p>
            </div>
            <div class="flex space-x-2">
              <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">Arduino</span>
              <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">C++</span>
              <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">语音算法</span>
            </div>
          </div>
        </div>
        
        <!-- 曾铵轩 -->
        <div class="team-card bg-gradient-to-br from-green-50 to-teal-50">
          <div class="p-6">
            <div class="flex items-center mb-4">
              <div class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mr-4">
                <span class="text-xl font-bold text-green-700">曾</span>
              </div>
              <div>
                <h3 class="text-xl font-bold text-gray-800">曾铵轩</h3>
                <p class="text-gray-600">2024113860</p>
              </div>
            </div>
            <div class="bg-white rounded-lg p-4 mb-4">
              <div class="flex items-center mb-2">
                <span class="role-tag bg-green-500 text-white">三维建模</span>
              </div>
              <p class="text-gray-700">负责产品3D模型设计与优化，确保各组件的精确配合。</p>
            </div>
            <div class="flex space-x-2">
              <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">Fusion 360</span>
              <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">CAD</span>
              <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">模型优化</span>
            </div>
          </div>
        </div>
        
        <!-- 魏豪 -->
        <div class="team-card bg-gradient-to-br from-yellow-50 to-amber-50">
          <div class="p-6">
            <div class="flex items-center mb-4">
              <div class="w-16 h-16 rounded-full bg-yellow-100 flex items-center justify-center mr-4">
                <span class="text-xl font-bold text-yellow-700">魏</span>
              </div>
              <div>
                <h3 class="text-xl font-bold text-gray-800">魏豪</h3>
                <p class="text-gray-600">2024113547</p>
              </div>
            </div>
            <div class="bg-white rounded-lg p-4 mb-4">
              <div class="flex items-center mb-2">
                <span class="role-tag bg-yellow-500 text-white">建模优化</span>
              </div>
              <p class="text-gray-700">负责改进3D模型，提升产品结构强度与生产可行性。</p>
            </div>
            <div class="flex space-x-2">
              <span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm">结构分析</span>
              <span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm">模型优化</span>
              <span class="px-3 py-1 bg-yellow-100 text-yellow-800 rounded-full text-sm">材料选择</span>
            </div>
          </div>
        </div>
        
        <!-- 缪鸿千 -->
        <div class="team-card bg-gradient-to-br from-red-50 to-pink-50">
          <div class="p-6">
            <div class="flex items-center mb-4">
              <div class="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center mr-4">
                <span class="text-xl font-bold text-red-700">缪</span>
              </div>
              <div>
                <h3 class="text-xl font-bold text-gray-800">缪鸿千</h3>
                <p class="text-gray-600">2024113615</p>
              </div>
            </div>
            <div class="bg-white rounded-lg p-4 mb-4">
              <div class="flex items-center mb-2">
                <span class="role-tag bg-red-500 text-white">网站开发</span>
              </div>
              <p class="text-gray-700">负责项目展示网站设计与开发，UI/UX设计及技术文档编写。</p>
            </div>
            <div class="flex space-x-2">
              <span class="px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm">HTML/CSS</span>
              <span class="px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm">JavaScript</span>
              <span class="px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm">UI设计</span>
            </div>
          </div>
        </div>
        
        <!-- 团队合作 -->
        <div class="team-card bg-gradient-to-br from-purple-50 to-indigo-50 flex items-center justify-center p-8">
          <div class="text-center">
            <div class="w-20 h-20 rounded-full bg-purple-100 flex items-center justify-center mx-auto mb-6">
              <i class="fa fa-users text-purple-600 text-3xl"></i>
            </div>
            <h3 class="text-2xl font-bold text-gray-800 mb-3">团队协作</h3>
            <p class="text-gray-600 mb-4">跨学科合作，融合机械、电子、软件多领域专业知识</p>
            <div class="flex justify-center space-x-2">
              <span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full">敏捷开发</span>
              <span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full">每周会议</span>
              <span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full">协同设计</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 课程项目介绍 -->
  <section id="course" class="py-16 bg-gradient-to-br from-blue-50 to-cyan-50">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center mb-16">
        <h2 class="text-3xl md:text-4xl font-bold text-dark mb-4 section-title">课程项目</h2>
        <p class="text-xl text-gray-600 max-w-3xl mx-auto">从理论到实践，综合应用多领域技术</p>
      </div>
      
      <div class="max-w-4xl mx-auto bg-white rounded-2xl shadow-xl p-8 mb-16">
        <h3 class="text-2xl font-bold text-center mb-8">课程技术路线</h3>
        
        <div class="grid grid-cols-1 md:grid-cols-5 gap-6 items-center">
          <div class="text-center">
            <div class="w-16 h-16 rounded-full bg-blue-500 flex items-center justify-center mx-auto mb-4">
              <i class="fa fa-cut text-white text-2xl"></i>
            </div>
            <h4 class="font-bold">激光切割</h4>
          </div>
          
          <div class="flex justify-center">
            <i class="fa fa-arrow-right text-2xl text-gray-400"></i>
          </div>
          
          <div class="text-center">
            <div class="w-16 h-16 rounded-full bg-green-500 flex items-center justify-center mx-auto mb-4">
              <i class="fa fa-cube text-white text-2xl"></i>
            </div>
            <h4 class="font-bold">三维建模</h4>
          </div>
          
          <div class="flex justify-center">
            <i class="fa fa-arrow-right text-2xl text-gray-400"></i>
          </div>
          
          <div class="text-center">
            <div class="w-16 h-16 rounded-full bg-yellow-500 flex items-center justify-center mx-auto mb-4">
              <i class="fa fa-print text-white text-2xl"></i>
            </div>
            <h4 class="font-bold">3D打印</h4>
          </div>
          
          <div class="flex justify-center md:hidden">
            <i class="fa fa-arrow-down text-2xl text-gray-400"></i>
          </div>
          <div class="hidden md:flex justify-center">
            <i class="fa fa-arrow-right text-2xl text-gray-400"></i>
          </div>
          
          <div class="text-center md:col-span-5 mt-6 md:mt-0 md:col-span-1">
            <div class="w-16 h-16 rounded-full bg-purple-500 flex items-center justify-center mx-auto mb-4">
              <i class="fa fa-code text-white text-2xl"></i>
            </div>
            <h4 class="font-bold">嵌入式编程</h4>
          </div>
          
          <div class="flex justify-center md:hidden">
            <i class="fa fa-arrow-down text-2xl text-gray-400"></i>
          </div>
          <div class="hidden md:flex justify-center">
            <i class="fa fa-arrow-right text-2xl text-gray-400"></i>
          </div>
          
          <div class="text-center md:col-span-5 mt-6 md:mt-0 md:col-span-1">
            <div class="w-16 h-16 rounded-full bg-red-500 flex items-center justify-center mx-auto mb-4">
              <i class="fa fa-microchip text-white text-2xl"></i>
            </div>
            <h4 class="font-bold">PCB设计</h4>
          </div>
        </div>
      </div>
      
      <div class="mb-12">
        <h3 class="text-2xl font-bold text-center mb-8">项目成果</h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
          <!-- 称小智 -->
          <div class="project-card bg-white rounded-xl overflow-hidden shadow-md">
            <div class="h-48 bg-gradient-to-r from-amber-100 to-yellow-100 flex items-center justify-center">
              <i class="fa fa-balance-scale text-amber-500 text-6xl"></i>
            </div>
            <div class="p-6">
              <h4 class="font-bold text-xl mb-2">称小智 - 智能称</h4>
              <p class="text-gray-600 mb-4">具备数据记录和分析功能的智能电子秤，可连接手机APP管理健康数据。</p>
              <div class="flex flex-wrap gap-2">
                <span class="px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm">重量传感</span>
                <span class="px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm">蓝牙传输</span>
                <span class="px-3 py-1 bg-amber-100 text-amber-800 rounded-full text-sm">数据分析</span>
              </div>
            </div>
          </div>
          
          <!-- 激光雷达 -->
          <div class="project-card bg-white rounded-xl overflow-hidden shadow-md">
            <div class="h-48 bg-gradient-to-r from-blue-100 to-cyan-100 flex items-center justify-center">
              <i class="fa fa-crosshairs text-blue-500 text-6xl"></i>
            </div>
            <div class="p-6">
              <h4 class="font-bold text-xl mb-2">扫描激光雷达</h4>
              <p class="text-gray-600 mb-4">360度环境扫描设备，可构建室内地图，用于导航和空间测量。</p>
              <div class="flex flex-wrap gap-2">
                <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">激光测距</span>
                <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">SLAM算法</span>
                <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">点云处理</span>
              </div>
            </div>
          </div>
          
          <!-- 懒人开关 -->
          <div class="project-card bg-white rounded-xl overflow-hidden shadow-md">
            <div class="h-48 bg-gradient-to-r from-green-100 to-teal-100 flex items-center justify-center">
              <i class="fa fa-lightbulb-o text-green-500 text-6xl"></i>
            </div>
            <div class="p-6">
              <h4 class="font-bold text-xl mb-2">懒人开关</h4>
              <p class="text-gray-600 mb-4">语音控制智能开关，支持多设备管理和智能场景设置。</p>
              <div class="flex flex-wrap gap-2">
                <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">语音识别</span>
                <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">继电器控制</span>
                <span class="px-3 py-1 bg-green-100 text-green-800 rounded-full text-sm">智能家居</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 项目总结 -->
  <section id="summary" class="py-16 bg-white">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="text-center mb-16">
        <h2 class="text-3xl md:text-4xl font-bold text-dark mb-4 section-title">项目总结</h2>
        <p class="text-xl text-gray-600 max-w-3xl mx-auto">声控开关项目经验总结与未来展望</p>
      </div>
      
      <div class="max-w-5xl mx-auto">
        <!-- 项目概述 -->
        <div class="bg-gradient-to-r from-blue-50 to-cyan-50 rounded-2xl p-8 mb-12">
          <h3 class="text-2xl font-bold mb-6 text-center">项目概述</h3>
          <p class="text-gray-700 text-lg leading-relaxed mb-6">
            声控开关项目前期通过三维建模、3D打印与激光切割完成结构设计，结合PCB与嵌入式编程实现语音识别及继电器控制逻辑。项目团队克服了技术融合过程中的兼容性与协同难题，通过反复调试优化解决了噪音干扰等问题，最终实现了稳定的语音控制功能。
          </p>
          <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
            <div class="text-center">
              <div class="text-4xl text-primary font-bold mb-2">5</div>
              <div class="text-gray-600">团队成员</div>
            </div>
            <div class="text-center">
              <div class="text-4xl text-primary font-bold mb-2">12</div>
              <div class="text-gray-600">开发周数</div>
            </div>
            <div class="text-center">
              <div class="text-4xl text-primary font-bold mb-2">96%</div>
              <div class="text-gray-600">识别准确率</div>
            </div>
          </div>
        </div>
        
        <!-- 技术挑战 -->
        <div class="mb-12">
          <h3 class="text-2xl font-bold mb-6 text-center">技术挑战与解决方案</h3>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
            <div class="bg-gray-50 rounded-xl p-6">
              <h4 class="font-bold text-xl mb-3 flex items-center">
                <i class="fa fa-exclamation-triangle text-red-500 mr-3"></i>
                面临挑战
              </h4>
              <ul class="space-y-3">
                <li class="flex items-start">
                  <i class="fa fa-circle text-red-500 mr-2 mt-1 text-xs"></i>
                  <span>多技术领域融合的兼容性问题</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-circle text-red-500 mr-2 mt-1 text-xs"></i>
                  <span>背景噪音干扰语音识别准确率</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-circle text-red-500 mr-2 mt-1 text-xs"></i>
                  <span>不同设备间的通信协议差异</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-circle text-red-500 mr-2 mt-1 text-xs"></i>
                  <span>产品结构强度与安全性的平衡</span>
                </li>
              </ul>
            </div>
            
            <div class="bg-gray-50 rounded-xl p-6">
              <h4 class="font-bold text-xl mb-3 flex items-center">
                <i class="fa fa-check-circle text-green-500 mr-3"></i>
                解决方案
              </h4>
              <ul class="space-y-3">
                <li class="flex items-start">
                  <i class="fa fa-circle text-green-500 mr-2 mt-1 text-xs"></i>
                  <span>建立统一通信协议，标准化接口</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-circle text-green-500 mr-2 mt-1 text-xs"></i>
                  <span>采用降噪算法增强语音识别能力</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-circle text-green-500 mr-2 mt-1 text-xs"></i>
                  <span>开发通用适配层解决设备兼容</span>
                </li>
                <li class="flex items-start">
                  <i class="fa fa-circle text-green-500 mr-2 mt-1 text-xs"></i>
                  <span>结构仿真与多材料测试优化</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
        
        <!-- 未来展望 -->
        <div class="bg-gradient-to-r from-purple-50 to-indigo-50 rounded-2xl p-8">
          <h3 class="text-2xl font-bold mb-6 text-center">未来展望</h3>
          <p class="text-gray-700 text-lg leading-relaxed mb-8">
            虽然用户体验高度依赖识别率，但我们在现有成果基础上，计划进一步拓展功能：集成智能家居系统并增加多控制方式（手势、APP、自动化），提升智能化水平与应用场景多样性。
          </p>
          
          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div class="text-center">
              <div class="future-icon bg-purple-100 mx-auto">
                <i class="fa fa-home text-purple-600 text-2xl"></i>
              </div>
              <h4 class="font-bold text-lg mb-2">智能家居集成</h4>
              <p class="text-gray-600">与更多智能设备联动，打造完整智能家居生态系统</p>
            </div>
            
            <div class="text-center">
              <div class="future-icon bg-indigo-100 mx-auto">
                <i class="fa fa-hand-pointer-o text-indigo-600 text-2xl"></i>
              </div>
              <h4 class="font-bold text-lg mb-2">多模态交互</h4>
              <p class="text-gray-600">增加手势控制、手机APP、自动化场景等多控制方式</p>
            </div>
            
            <div class="text-center">
              <div class="future-icon bg-blue-100 mx-auto">
                <i class="fa fa-brain text-blue-600 text-2xl"></i>
              </div>
              <h4 class="font-bold text-lg mb-2">AI学习能力</h4>
              <p class="text-gray-600">加入用户习惯学习功能，提供更智能的自动化建议</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- 联系区域 -->
  <section id="contact" class="py-16 bg-gradient-to-r from-dark to-gray-900 text-white">
    <div class="container mx-auto px-4 sm:px-6 lg:px-8">
      <div class="max-w-4xl mx-auto text-center">
        <h2 class="text-3xl md:text-4xl font-bold mb-6">对我们的项目感兴趣？</h2>
        <p class="text-xl text-gray-300 mb-10 max-w-2xl mx-auto">欢迎联系团队了解更多项目细节、技术实现或合作机会</p>
        
        <div class="flex flex-wrap justify-center gap-4">
          <a href="#" class="px-6 py-3 bg-white text-dark font-medium rounded-lg hover:bg-gray-100 transition-colors flex items-center">
            <i class="fa fa-envelope mr-2"></i>
            发送邮件
          </a>
          <a href="#" class="px-6 py-3 bg-primary text-white font-medium rounded-lg hover:bg-primary/90 transition-colors flex items-center">
            <i class="fa fa-github mr-2"></i>
            GitHub项目
          </a>
          <a href="#" class="px-6 py-3 bg-green-500 text-white font-medium rounded-lg hover:bg-green-600 transition-colors flex items-center">
            <i class="fa fa-weixin mr-2"></i>
            微信联系
          </a>
        </div>
        
        <div class="mt-12 pt-8 border-t border-gray-700">
          <p class="text-gray-400">懒人开关项目 © 2025 - 综合工程实践课程作品</p>
          <p class="text-gray-500 mt-2">融合多领域技术的创新实践，打造智能生活体验</p>
        </div>
      </div>
    </div>
  </section>

  <!-- 返回顶部按钮 -->
  <button id="back-to-top" class="fixed bottom-8 right-8 w-12 h-12 rounded-full bg-primary text-white shadow-lg flex items-center justify-center opacity-0 invisible transition-all">
    <i class="fa fa-arrow-up"></i>
  </button>

  <script>
    // 返回顶部按钮
    const backToTopBtn = document.getElementById('back-to-top');
    
    window.addEventListener('scroll', () => {
      if (window.pageYOffset > 300) {
        backToTopBtn.classList.remove('opacity-0', 'invisible');
        backToTopBtn.classList.add('opacity-100', 'visible');
      } else {
        backToTopBtn.classList.remove('opacity-100', 'visible');
        backToTopBtn.classList.add('opacity-0', 'invisible');
      }
    });
    
    backToTopBtn.addEventListener('click', () => {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    });
    
    // 滚动动画
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('fade-in');
        }
      });
    }, {
      threshold: 0.1
    });
    
    document.querySelectorAll('section').forEach(section => {
      observer.observe(section);
    });
  </script>
</body>
</html>